<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>我也不知道叫什么 然后看完你就成了才</title>
    <link rel="stylesheet" href="__STATIC__/css/bootstrap.min.css" />
    <link rel="stylesheet" href="__STATIC__/css/header.css" />
    <link rel="stylesheet" href="__STATIC__/font-awesome/css/font-awesome.min.css">
    <script src="__STATIC__/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/js/bootstrap.min.js"  type="text/javascript" charset="utf-8"></script>
    <script src="__STATIC__/js/common.js"  type="text/javascript" charset="utf-8"></script>
    <style>
        .container-bar{
            position: absolute;
            width: 100%;
            z-index: 1;
        }
        .guidance-box{
            width: 100%;
            height: auto;
            background: #FFFFFF;
        }
        .guidance-bar{
            width: 100%;
            height: 44px;
        }
        .guidance-bar-classify {
            padding: 8px 16px 8px 24px;
            height: 100%;
        }
        .guidance-bar-search{
            padding: 8px 16px 8px 24px;
            height: 100%;
        }
        .guidance-btn-bar{
            display: flex;
            flex-direction: row;
        }
        .btn-style{
            width: 88px;
            height: 100%;
            border: solid 0px #333333;

            color: #333333;
            border-radius: 6px;
            display: flex;
            justify-content: center;
            align-items: center;

        }
        .common-btn-style{
            width: 64px;
            background-color: #c02c38;
            color:#FFFFFF;
            border: solid 0px #000000;
            border-radius: 6px;
        }
        /*common.css*/
        .height-100{
            height: 100%;
        }
        .margin-left-24{
            margin-left: 24px;
        }
        .margin-top-20{
            margin-top: 12px;
            margin-bottom: 12px;
        }
        .width-256{
            width: 256px;
        }
        .width-100{
            width: 100%;
        }
        .division-line{
            width: 100%;height: 10px;
        }
        img{
            width: 100%;
        }
        .carousel-bar{
            padding: 0px;
            margin:  0px;
        }
        .common-bar{
            padding-left: 2%;
            padding-right: 2%;
        }
        .course-min-bar{
            height: 492px;
            width: 100%;
        }
        .course-msg{
            height: 48%;
            box-shadow: 4px 4px 4px 4px gray;
            border-radius: 12px;
        }
        .course-type{
            width: 20%;
            height: 100%;
            background-color: #333333;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        .course-detail{
            overflow: auto;
        }
        .course-detail-bar{
            margin: 6px;
            height: 100px;
            width: 150px;
            border: solid 1px #000000;
            border-radius: 8px;
            background-color: #000000;
        }
        .forum-bar{
            margin-left: 10px;
            width: 32%;
            height: 100%;
            border: solid 0px #000000;
            border-radius: 12px;
        }
        .teacher-title{
            width: 240px;
            height: 44px;
            background-color: #FFFFFF;
        }
        .teacher-title>span{
            padding: 6px 36px 6px 36px;
            border: solid 1px #333333;
            border-radius: 8px;
            background-color: #333333;
            color: #ffffff;
        }
        .teacher-msg{
            width: 100%;
            height: auto;
        }
        .teacher-detail-msg{
            margin: 1%;
            width: 12%;
            height: 360px;
            background-color: rgba(196,196,196,0.5);
        }
        .course-detail-imgs{
            width: 100%;
            height: 100%;
        }
        .logout-bar {
            background-color: #fff;
            left: 40%;
            position: fixed;
            top: 30%;
            width: 300px;
            height: auto;
            z-index: 25;
            border:solid 0px #333333;
            border-radius: 20px;
        }
        .close-btn{
            border: solid 0px #333333;
            background: #ffffff;
            width: 24px;
            height: 24px;
        }
        .logout-btn{
            border: solid 1px #333333;
            border-radius: 8px;
            padding: 4px 24px 4px 24px;
            color: #ffffff;
            background-color: #7abaff;
        }
        .border-radius{
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        }
        .border-radius-all{
            border-radius: 12px;
        }
    </style>
</head>
<body>
<div class="header">
    <div class="header-logo-bar">
        <div class="header-logo-msg">
            <!--<div class="logo">

            </div>
            <div class="logo">

            </div>-->
        </div>
        <div class="header-personal-message">
            <span><a href="#"></a></span>
            <span><a href="#"></a></span>
            <div class="profile-photo">
                <img src="__STATIC__/imgs/{$head_picture.picture}" alt="" class="profile-photo-size">
            </div>
        </div>
    </div>
    <div class="nav-bar">
        <ul class="nav">
            <a href="{:url('index/index/home')}">首页</a>
        </ul>
        <ul>
            <a href="#">前端</a>
            <ul class="plat">
                <li><a href="{:url('index/index/scourse')}?type=html">HTML</a></li>
                <li><a href="{:url('index/index/scourse')}?type=css">CSS</a></li>
                <li><a href="{:url('index/index/scourse')}?type=javascript">Javascript</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">后端</a>
            <ul class="plat">
                <li><a href="{:url('index/index/scourse')}?type=java">Java</a></li>
                <li><a href="{:url('index/index/scourse')}?type='c">c++</a></li>
                <li><a href="{:url('index/index/scourse')}?type=php">PHP</a></li>
                <li><a href="{:url('index/index/scourse')}?type=python">python</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">移动</a>
            <ul class="plat">
                <li><a href="{:url('index/index/scourse')}?type=ios">ios</a></li>
                <li><a href="{:url('index/index/scourse')}?type=android">Android</a></li>
            </ul>
        </ul>
        <ul>
            <a href="#">数据库</a>
            <ul class="plat">
                <li><a href="{:url('index/index/scourse')}?type=mysql">MySQL</a></li>
                <li><a href="{:url('index/index/scourse')}?type=sqlserver">SQLServer</a></li>
                <li><a href="{:url('index/index/scourse')}?type=oracle">Oracle</a></li>
            </ul>
        </ul>
    </div>
</div>
<div class="personal-msg">
    <div class="personal-msg-bar">
        <div class="personal-msg-profile-photo"><img src="__STATIC__/imgs/{$head_picture.picture}" alt="" class="profile-photo-size"></div>
        <div class="personal-msg-username"><span>{$username}</span></div>
    </div>
    <div class="personal-msg-order">
        <div class="personal-msg-btn"><a href="#">我的课程</a></div>
        <div class="personal-msg-btn"><a href="{:url('index/personal/personal')}">个人信息</a></div>
    </div>
    <div class="personal-msg-order">
        <div class="personal-msg-btn"><a href="#">最近浏览</a></div>
        <div class="personal-msg-btn"><a href="#" id="logout">退出登录</a></div>
    </div>
</div>
<div class="container-bar">
    <div class="division-line"></div>
    <div class="guidance-box">
        <div class="guidance-bar row mt-3">
            <div class="guidance-bar-classify col-md-6"><div class="btn-style margin-left-24"><i class="fa fa-american-sign-language-interpreting"></i>分类</div></div>
            <div class="guidance-bar-search col-md-6 d-flex justify-content-around">
                <div class="guidance-btn-bar">
                    <div class="btn-style"><a href=""></a></div>
                    <div class="btn-style margin-left-24"><a href=""></a></div>
                </div>
                <div>
                    <form action="{:url('index/index/searchCourse')}" method="post">
                        <input type="text" id="search" name="search"  placeholder=""  class="height-100 width-256"/>
                        <input type="submit" value="search"  class="common-btn-style height-100" />
                    </form>
                </div>
            </div>
        </div>
        <div class="carousel-bar row col-md-12 ">
            <div id="demo" class="carousel slide width-100" data-ride="carousel">

                <!-- 指示符 -->
                <ul class="carousel-indicators">
                    <li data-target="#demo" data-slide-to="0" class="active"></li>
                    <li data-target="#demo" data-slide-to="1"></li>
                    <li data-target="#demo" data-slide-to="2"></li>
                </ul>

                <!-- 轮播图片 -->
                <div class="carousel-inner">
                    <div class="carousel-item active ">
                        <img src="__STATIC__/imgs/img_fjords_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="__STATIC__/imgs/img_nature_wide.jpg">
                    </div>
                    <div class="carousel-item">
                        <img src="__STATIC__/imgs/img_mountains_wide.jpg">
                    </div>
                </div>

                <!-- 左右切换按钮 -->
                <a class="carousel-control-prev" href="#demo" data-slide="prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a class="carousel-control-next" href="#demo" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>
        </div>
    </div>
    <div class="mt-3">
        <div class="common-bar d-flex flex-column mb-3">
            <div class="course-min-bar d-flex  justify-content-around mb-3">
                <div class=" d-flex flex-column justify-content-between width-100">
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type">
                            <img src="__STATIC__/imgs/qianduan.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "前端"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="houduan">
                            <img src="__STATIC__/imgs/houduan.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "后端"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="forum-bar">
                    <img src="__STATIC__/imgs/jqqd.jpg" alt="" class="course-detail-imgs border-radius-all" />
                </div>
            </div>
            <div class="course-min-bar d-flex  justify-content-around mb-3">
                <div class=" d-flex flex-column justify-content-between width-100">
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="mobile">
                            <img src="__STATIC__/imgs/yidong.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "移动"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                    <div class="course-msg d-flex justify-content-start">
                        <div class="course-type" id="sql">
                            <img src="__STATIC__/imgs/shujuku.jpg" alt="" class="course-detail-imgs border-radius" />
                        </div>
                        <div class="course-detail d-flex flex-wrap justify-content-start">
                            {volist name="course" id="c" }
                            {if $c.direction eq "数据库"}
                            <div class="course-detail-bar">
                                <a href="{:url('index/index/detail')}?v={$c.video}"><img src="__STATIC__/course/imgs/{$c.img}" alt="" class="course-detail-imgs" /></a>
                            </div>
                            {/if}
                            {/volist}
                        </div>
                    </div>
                </div>
                <div class="forum-bar">
                    <img src="__STATIC__/imgs/jqqd.jpg" alt="" class="course-detail-imgs border-radius-all" />
                </div>
            </div>

        </div>
    </div>
    <div class="mt-3">
        <div class="common-bar d-flex flex-column justify-content-around">
            <div class="d-flex justify-content-center">
                <div class="teacher-title d-flex justify-content-center align-items-center">
                    <span>金牌教师</span>
                </div>
            </div>
            <div class="teacher-msg d-flex justify-content-start flex-wrap">
                {volist name="teacher" id="t" }
                <div class="teacher-detail-msg">
                    <img src="__STATIC__/imgs/{$t.tpicture}" alt="{$t.tname}" class="course-detail-imgs" />
                </div>
                {/volist}
            </div>
        </div>
    </div>
</div>
<dialog id="logout-bar" class="logout-bar mt-3 " >
    <div class="d-flex flex-column">
        <div class="d-flex justify-content-end">
            <button id="gg" class="close-btn"><i class="fa fa-times" aria-hidden="true"></i></button>
        </div>
        <div class="d-flex justify-content-center margin-top-20">
            <span>确认是否退出登录</span>
        </div>
        <div class="d-flex justify-content-around margin-top-20">
            <a href="" class="logout-btn">取消</a>
            <a href="{:url('index/index/logout')}" class="logout-btn">确定</a>
        </div>
    </div>
</dialog>
</body>
</html>
